<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<head>
    <!-- meta tags -->
    <meta charset="utf-8">

    <!-- Title -->
    <title>首页</title>

    <!-- Favicon Icon -->
    <link rel="shortcut icon" href="/mallWeb/static/images/favicon.png"/>

    <!-- ui组件 -->
    <script src="/mallWeb/static/layui/layui.js"></script>
    <link href="/mallWeb/static/layui/css/layui.css" rel="stylesheet"/>
    <link href="/mallWeb/static/layui/css/modules/layer/default/layer.css" rel="stylesheet"/>
    <link href="/mallWeb/static/layui/css/modules/code.css" rel="stylesheet"/>
    <link href="/mallWeb/static/layui/css/modules/laydate/default/laydate.css" rel="stylesheet"/>

    <!-- 搜索 -->
    <!-- inject css start -->

    <link href="/mallWeb/static/css/theme-plugin.css" rel="stylesheet"/>
    <link href="/mallWeb/static/css/theme.min.css" rel="stylesheet"/>

    <style type="text/css">
        .container_search {
            width: 590px;
            margin: 0 auto;
            padding-top: 100px;
            position: relative;
        }

        .container_search:after {
            content: '';
            display: block;
            clear: both;
        }

        .container_search > div {
            float: left;
        }

        .container_search .logo {
            width: 100%;
            height: 120px;
            margin: 0 auto 10px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: auto 120px;
        }

        .container_search .input {
            position: relative;
            width: 500px;
            height: 44px;
            border-top: #ccc solid 1px;
            border-right: none;
            border-bottom: #ccc solid 1px;
            border-left: #ccc solid 1px;
            border-radius: 4px 0 0 4px;
        }

        .container_search .input > input {
            outline: none;
            border: none;
            padding: 0 80px 0 10px;
            margin: 0;
            height: 40px;
            width: 410px;
            color: #333;
            font-size: 16px;
            border-radius: 4px 0 0 4px;
        }

        .container_search .input > input::-webkit-input-placeholder {
            color: #999;
        }

        .container_search .input .picker {
            width: 40px;
            padding-right: 30px;
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            line-height: 44px;
            cursor: pointer;
            color: #999;
            font-size: 12px;
            text-align: right;
            background-image: url("/mallWeb/static/images/down.png");
            background-position: 50px center;
            background-repeat: no-repeat;
            user-select: none;
        }

        .container_search .input .picker-list {
            list-style: none;
            padding: 5px 0;
            width: 100px;
            position: absolute;
            right: 0;
            top: 50px;
            margin: 0;
            line-height: 26px;
            font-size: 12px;
            border-radius: 2px;
            box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
            background-color: #fff;
            display: none;
        }

        .container_search .input .picker-list > li {
            padding-left: 36px;
            background-position: 10px center;
            background-repeat: no-repeat;
            background-size: 16px auto;
        }

        .container_search .input .picker-list > li:hover {
            background-color: #ebf1f5;
            cursor: pointer;
        }

        .container_search .input .hot-list {
            padding: 10px 0;
            width: 100%;
            position: absolute;
            left: 0;
            top: 50px;
            margin: 0;
            line-height: 32px;
            font-size: 14px;
            border-radius: 2px;
            box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
            background-color: #fff;
            display: none;
        }

        .container_search .input .hot-list > a {
            display: block;
            color: #333;
            text-decoration: none;
            padding: 0 10px;
            overflow: hidden;
        }

        .container_search .input .hot-list > a:hover {
            background-color: #f3f3f3;
        }

        .container_search .input .hot-list > a > div {
            float: left;
        }

        .container_search .input .hot-list > a > div.number {
            text-align: center;
            width: 40px;
        }

        .container_search .search {
            width: 89px;
            height: 46px;
            background-color: #08f;
            background-image: url("/mallWeb/static/images/search.png");
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
    </style>
    <!-- inject css end -->
    <style>
        .Personal_center {
            position: relative;
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: auto auto auto auto;
            border: 0px solid #6a89cc;
            border-radius: 50%;
        }

        .Personal_center img {
            position: absolute;
            width: 30px;
            height: 30px;
            margin-right: 0.5rem;
            border-radius: 50%;
            overflow: hidden;
        }

        .drop_option {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 10px;
        }

        .Personal_center:hover .drop_option {
            display: block;
        }
    </style>
</head>

<body>

<!-- page wrapper start -->

<div class="page-wrapper">

    <!-- preloader start -->

    <div id="ht-preloader">
        <div class="loader clear-loader"><img class="img-fluid" src="/mallWeb/static/images/loader.gif" alt=""></div>
    </div>

    <!-- preloader end -->

    <header class="site-header header-1">
        <div class="header-top bg-dark-1 py-0">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-12 d-flex align-items-center justify-content-between text-white">
                        <div class="d-none d-md-flex align-items-center call-info">
                            <div class="d-flex align-items-center">
                                <div class="text-white offer-text"><small><img
                                        src="/mallWeb/static/images/share/shopping.png" width="30" height="30">
                                    欢迎来到校园易货网 </small></div>
                                <div class="language-selection">
                                    <div class="d-flex align-items-center justify-content-center justify-content-md-end">
                                        <div class="ml-3 mr-3">
                                        </div>
                                        <div class="lng_dropdown">
                                            <select name="countries" class="custome_select">
                                                <option value='en' data-image="/mallWeb/static/images/share/ZYNC.jpg"
                                                        data-title="ZYNC">遵义师范学院
                                                </option>
                                                <option value='fn' data-image="/mallWeb/static/images/share/ZYNU.jpg"
                                                        data-title="ZYNU">遵义医科大学
                                                </option>
                                                <option value='us'
                                                        data-image="/mallWeb/static/images/share/OtherSchool.png"
                                                        data-title="Other School">其他学校
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="header-wrap">
            <div class="container">
                <div class="row">
                    <!--menu start-->
                    <div class="col">
                        <nav class="navbar navbar-expand-lg navbar-light position-static"><a class="navbar-brand logo"
                                                                                             href="index.html"> <img
                                class="img-fluid" src="/mallWeb/static/images/share/zync.png" width="180" height="80">
                        </a>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                                    aria-expanded="false" aria-label="Toggle navigation"><span
                                    class="navbar-toggler-icon"></span></button>
                            <div class="collapse navbar-collapse" id="navbarNav">
                                <ul class="navbar-nav ml-auto mr-auto">
                                    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle active"
                                                                     href="${pageContext.request.contextPath}/index-1">首页</a>
                                    </li>
                                    <li class="nav-item dropdown position-static"><a class="nav-link dropdown-toggle"
                                                                                     href="${pageContext.request.contextPath}/autotrophy-1">自营</a>
                                        <div class="dropdown-menu w-100">
                                            <!-- Tabs -->
                                            <div class="container p-0">
                                                <div class="row w-100 no-gutters">
                                                    <div class="col-lg-8 p-lg-3">
                                                        <div class="row">
                                                            <div class="col-12 col-md-3 col-sm-6">
                                                                <!-- Heading -->
                                                                <div class="mb-2 font-w-5 text-link">服装男</div>
                                                                <!-- Links -->
                                                                <ul class="list-unstyled mb-6 mb-md-0">
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=长袖">长袖</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=短袖">短袖</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=外套">外套</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=羽绒服">羽绒服</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=牛仔库">牛仔裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=牛仔衣">牛仔衣</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=短裤">短裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=绒裤">绒裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=运动裤">运动库</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=男装&classify=其它">其它</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="col-12 col-md-3 col-sm-6">
                                                                <!-- Heading -->
                                                                <div class="mb-2 font-w-5 text-link">女装</div>
                                                                <!-- Links -->
                                                                <ul class="list-unstyled mb-6 mb-md-0">
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=长袖">长袖</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=短袖">短袖</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=外套">外套</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=羽绒服">羽绒服</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=牛仔裤">牛仔裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=牛仔衣">牛仔衣</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=短裤">短裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=绒裤">绒裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=运动裤">运动裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=女装&classify=其它">其它</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="col-12 col-md-3 col-sm-6">
                                                                <!-- Heading -->
                                                                <div class="mb-2 font-w-5 text-link">手机</div>
                                                                <!-- Links -->
                                                                <ul class="list-unstyled mb-6 mb-md-0">
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=华为">华为</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=华为">小米</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=苹果">苹果</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=一加">一加</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=魅族">魅族</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=OPPO">OPPO</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=VIVO">VIVO</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=三星">三星</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=努比亚">努比亚</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=手机&classify=其它">其它</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="col-12 col-md-3 col-sm-6">
                                                                <!-- Heading -->
                                                                <div class="mb-2 font-w-5 text-link">图书</div>
                                                                <!-- Links -->
                                                                <ul class="list-unstyled mb-0">
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=小说">小说</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=儿童读物">儿童读物</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=漫画">漫画</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=期刊">期刊</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=杂志">杂志</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=计算机技术">计算机技术</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=农业科学">农业科学</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=中国文学">中国文学</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=书法篆刻">书法篆刻</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-auto?requestName=图书&classify=经典读物">经典读物</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4 d-none d-lg-block pr-2"><img
                                                            class="img-fluid rounded-bottom rounded-top"
                                                            src="/mallWeb/static/images/header-img.jpg" alt="..."></div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown position-static"><a class="nav-link dropdown-toggle"
                                                                                     href="${pageContext.request.contextPath}/idle-goods-1">闲置商品</a>
                                        <div class="dropdown-menu w-100">
                                            <!-- Tabs -->
                                            <div class="container p-0">
                                                <div class="row w-100 no-gutters">
                                                    <div class="col-lg-8 p-lg-3">
                                                        <div class="row">
                                                            <div class="col-12 col-md-3 col-sm-6">
                                                                <!-- Heading -->
                                                                <div class="mb-2 font-w-5 text-link">服装男</div>
                                                                <!-- Links -->
                                                                <ul class="list-unstyled mb-6 mb-md-0">
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=长袖">长袖</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=短袖">短袖</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=外套">外套</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=羽绒服">羽绒服</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=牛仔库">牛仔裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=牛仔衣">牛仔衣</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=短裤">短裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=绒裤">绒裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=运动裤">运动库</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=男装&classify=其它">其它</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="col-12 col-md-3 col-sm-6">
                                                                <!-- Heading -->
                                                                <div class="mb-2 font-w-5 text-link">女装</div>
                                                                <!-- Links -->
                                                                <ul class="list-unstyled mb-6 mb-md-0">
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=长袖">长袖</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=短袖">短袖</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=外套">外套</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=羽绒服">羽绒服</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=牛仔裤">牛仔裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=牛仔衣">牛仔衣</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=短裤">短裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=绒裤">绒裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=运动裤">运动裤</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=女装&classify=其它">其它</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="col-12 col-md-3 col-sm-6">
                                                                <!-- Heading -->
                                                                <div class="mb-2 font-w-5 text-link">手机</div>
                                                                <!-- Links -->
                                                                <ul class="list-unstyled mb-6 mb-md-0">
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=华为">华为</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=华为">小米</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=苹果">苹果</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=一加">一加</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=魅族">魅族</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=OPPO">OPPO</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=VIVO">VIVO</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=三星">三星</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=努比亚">努比亚</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=手机&classify=其它">其它</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="col-12 col-md-3 col-sm-6">
                                                                <!-- Heading -->
                                                                <div class="mb-2 font-w-5 text-link">图书</div>
                                                                <!-- Links -->
                                                                <ul class="list-unstyled mb-0">
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=图书&classify=小说">小说</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idlerequestName=图书&classify=儿童读物">儿童读物</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=图书&classify=漫画">漫画</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=图书&classify=期刊">期刊</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=图书&classify=杂志">杂志</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=图书&classify=计算机技术">计算机技术</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=图书&classify=农业科学">农业科学</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=图书&classify=中国文学">中国文学</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=图书&classify=书法篆刻">书法篆刻</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="showClassify-idle?requestName=图书&classify=经典读物">经典读物</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4 d-none d-lg-block pr-2"><img
                                                            class="img-fluid rounded-bottom rounded-top"
                                                            src="/mallWeb/static/images/header-img.jpg" alt="..."></div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle"
                                                                     href="${pageContext.request.contextPath}/blog-1">博客</a>
                                    </li>
                                    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle"
                                                                     href="javascript:void(0)" data-toggle="dropdown">发布闲置</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="${pageContext.request.contextPath}/publish-book">发布图书</a></li>
                                            <li><a href="${pageContext.request.contextPath}/publish-phone">发布手机</a></li>
                                            <li><a href="${pageContext.request.contextPath}/publish-clothing">发布衣服</a>
                                            </li>
                                            <li><a href="${pageContext.request.contextPath}/publish-other">其它</a></li>
                                        </ul>
                                    </li>

                                    <li class="nav-item"><a class="nav-link"
                                                            href="${pageContext.request.contextPath}/about-us-1">关于我们</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="right-nav align-items-center d-flex justify-content-end">
                                <div class="mr-1 mr-sm-3 search-block"><a href="javascript:void(0);"
                                                                          class="search_trigger ml-3"><i
                                        class="las la-search"></i></a>
                                    <div style="width: 900px" class="search_wrap container"><span
                                            style="margin-top: 10px" class="close-search"><i
                                            class="ion-ios-close-empty"></i></span>
                                        <form name="submited">
                                            <div class="container_search"
                                                 style="box-sizing: border-box; padding-top: 10px">
                                                <div class="input">
                                                    <input type="text" placeholder="请输入要搜索的内容"
                                                           style="border-bottom-color: #cccccc" autocomplete="off"
                                                           id="search-input">
                                                    <c:forEach items="${key }" var="key">
                                                        <input type="hidden" class="pickListModels" value="${key }"/>
                                                    </c:forEach>
                                                    <div class="picker" style="width: 80px;">商品</div>
                                                    <ul class="picker-list" style="width: 70px;">
                                                        <li data-logo=""
                                                            style="padding-right: 0px;width: 68px;padding-left: 18px;">
                                                            商品
                                                        </li>
                                                        <li data-logo=""
                                                            style="padding-right: 0px;width: 68px;padding-left: 18px;">
                                                            店铺
                                                        </li>
                                                        <li data-logo=""
                                                            style="padding-right: 0px;width: 68px;padding-left: 18px;">
                                                            用户
                                                        </li>
                                                        <li data-logo=""
                                                            style="padding-right: 0px;width: 68px;padding-left: 18px;">
                                                            博客
                                                        </li>
                                                    </ul>
                                                    <div class="hot-list"></div>
                                                </div>
                                                <div class="search"></div>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                                <!-- <div class="cart_box dropdown-menu dropdown-menu-right">
                                  <ul class="cart_list">
                                    <li> <a href="javascript:void(0)" class="item_remove"><i class="ion-ios-close-empty"></i></a> <a href="javascript:void(0)"><img src="assets/images/product/p8.jpg" alt="cart_thumb1">Unpaired Running Shoes</a> <span class="cart_quantity"> 1 x <span class="cart_amount"> <span class="price_symbole">$</span></span>78.00</span> </li>
                                    <li> <a href="javascript:void(0)" class="item_remove"><i class="ion-ios-close-empty"></i></a> <a href="javascript:void(0)"><img src="assets/images/product/p12.jpg" alt="cart_thumb2">Unpaired Running Shoes</a> <span class="cart_quantity"> 1 x <span class="cart_amount"> <span class="price_symbole">$</span></span>81.00</span> </li>
                                  </ul>
                                </div> -->
                            </div>
                        </nav>
                    </div>
                    <div class="log_reg" style="padding-top: 20px;text-align:center;">
                        <a href="${pageContext.request.contextPath}/login"><span>登录</span></a>&nbsp;&nbsp;<a
                            href="${pageContext.request.contextPath}/register"><span>注册</span></a>&nbsp;&nbsp;
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--header end-->


    <!--hero section start-->

    <section class="bg-light py-6">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 page-title">
                    <h1 class="h2 mb-0">关于我们</h1>
                </div>
                <div class="col-md-6 mt-3 mt-md-0">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-md-end bg-transparent p-0 m-0">
                            <li class="breadcrumb-item"><a class="link-title" href="privacy-policy-1">隐私政策</a>
                            </li>
                            <li class="breadcrumb-item"><a class="link-title" href="terms-and-conditions-1">条规&条款</a>
                            </li>
                            <li class="breadcrumb-item active text-primary" aria-current="page"><a href="contact-us-2">
                                联系我们</a></li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!-- / .row -->
        </div>
        <!-- / .container -->
    </section>

    <!--hero section end-->


    <!--body content start-->

    <div class="page-content">


        <section>
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-12 col-lg-6 mb-6 mb-lg-0">
                        <img src="/mallWeb/static/images/about/01.jpg" class="img-fluid rounded shadow" alt="...">

                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="ml-2">
                            <h2 class="font-w-5">关于我们的校园易货</h2>
                            <p>方便你我他.</p>
                            <p>
                                一起来加入我们吧. </p>
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <!--our services start-->
        <section class="our-services border-top">
            <div class="container">
                <div class="row justify-content-center text-center">
                    <div class="col-lg-8 col-md-10">
                        <div class="mb-5">
                            <h2 class="mb-0 font-w-6">我们的服务</h2>
                        </div>
                    </div>
                </div>

                <div class="row text-center mt-5">
                    <div class="col-12 col-lg-4 col-md-4 mb-5 mb-md-0">
                        <i class="las la-palette text-primary"></i>
                        <h5 class="font-w-6">图</h5>
                        <p>精美页面等你欣赏.</p>
                    </div>
                    <div class="col-12 col-lg-4 col-md-4 mb-5 mb-md-0">
                        <i class="las la-life-ring text-primary"></i>
                        <h5 class="font-w-6">帮助</h5>
                        <p>在这里为你提供卖二手闲置商品.</p>
                    </div>
                    <div class="col-12 col-lg-4 col-md-4 mb-5 mb-md-0">
                        <i class="las la-bullhorn text-primary"></i>
                        <h5 class="font-w-6">推广</h5>
                        <p>可以帮助推广你的商品.</p>
                    </div>
                </div>
                <div class="row text-center mt-0 mt-lg-5 mt-md-5">
                    <div class="col-12 col-lg-4 col-md-4 mb-5 mb-md-0">
                        <i class="las la-globe-africa text-primary"></i>
                        <h5 class="font-w-6">快速</h5>
                        <p>快速帮你找到买家.</p>
                    </div>
                    <div class="col-12 col-lg-4 col-md-4 mb-5 mb-md-0">
                        <i class="las la-camera text-primary"></i>
                        <h5 class="font-w-6">精美图片</h5>
                        <p>通过博客分享看到精美图片.</p>
                    </div>
                    <div class="col-12 col-lg-4 col-md-4 mb-5 mb-md-0">
                        <i class="las la-tshirt text-primary"></i>
                        <h5 class="font-w-6">潮流服饰</h5>
                        <p>来看看大家都喜欢的服装.</p>
                    </div>
                </div>
            </div>
        </section>

        <!--our services end-->

        <!--testimonails start-->

        <section class="bg-pink-light testimonails custom-pb-0">
            <div class="container text-center">
                <div class="row justify-content-center">
                    <div class="col-12 pl-10 pr-10">
                        <div class="owl-carousel owl-center owl-2" data-center="true" data-dots="false" data-nav="true"
                             data-items="1" data-md-items="1" data-sm-items="1">
                            <div class="item">
                                <div class="card p-lg-10 bg-primary-soft border-0">
                                    <div>
                                        <img alt="Image" src="/mallWeb/static/images/about/01.jpg"
                                             class="img-fluid rounded-circle d-inline">
                                    </div>
                                    <div class="card-body pl-10 pr-10">
                                        <p class="text-dark font-w-3">项目的龙头老大，技术上的总工程师，团队的灵魂，团队的希望。</p>
                                        <div>
                                            <h6 class="text-primary d-inline mb-0">史德昇 </h6>
                                            <small class="text-muted">-快乐的客户</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="card p-lg-10 bg-primary-soft border-0">
                                    <div>
                                        <img alt="Image" src="/mallWeb/static/images/about/01.jpg"
                                             class="img-fluid rounded-circle d-inline">
                                    </div>
                                    <div class="card-body pl-10 pr-10">
                                        <p class="text-dark font-w-3">团队的二把手，团队的希望。</p>
                                        <div>
                                            <h6 class="text-primary d-inline mb-0">李化军 </h6>
                                            <small class="text-muted">- 快乐的客户</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="item">
                                <div class="card p-lg-10 bg-primary-soft border-0">
                                    <div>
                                        <img alt="Image" src="/mallWeb/static/images/about/01.jpg"
                                             class="img-fluid rounded-circle d-inline">
                                    </div>
                                    <div class="card-body pl-10 pr-10">
                                        <p class="text-dark font-w-3">团队前端的巧手，团队的三把手.</p>
                                        <div>
                                            <h6 class="text-primary d-inline mb-0">李永康 </h6>
                                            <small class="text-muted">- 快乐的客户</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!--testimonails end-->


        <!--our services start-->
        <section class="our-team border-bottom">
            <div class="container">
                <div class="row justify-content-center text-center">
                    <div class="col-lg-8 col-md-10">
                        <div class="mb-5">
                            <h2 class="mb-0 font-w-6">我们的团队</h2>
                        </div>
                    </div>
                </div>

                <div class="row text-center">
                    <div class="col-12 col-lg-3 col-md-6">
                        <img src="/mallWeb/static/images/about/01.jpg" alt="Image">
                        <h5 class="font-w-5">史德昇</h5>
                        <span>总项目长</span>
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-facebook"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-dribbble"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-instagram"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-twitter"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-linkedin"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-lg-3 col-md-6">
                        <img src="/mallWeb/static/images/about/01.jpg" alt="Image">
                        <h5 class="font-w-5">李化军 </h5>
                        <span>项目左青龙</span>
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-facebook"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-dribbble"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-instagram"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-twitter"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-linkedin"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-lg-3 col-md-6">
                        <img src="/mallWeb/static/images/about/01.jpg" alt="Image">
                        <h5 class="font-w-5">李永康 </h5>
                        <span>项目右白虎</span>
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-facebook"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-dribbble"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-instagram"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-twitter"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-linkedin"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-lg-3 col-md-6">
                        <img src="/mallWeb/static/images/about/01.jpg" alt="Image">
                        <h5 class="font-w-5">李素红</h5>
                        <span>项目划水选手</span>
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-facebook"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-dribbble"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-instagram"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-twitter"></i></a></li>
                            <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><i
                                    class="la la-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </section>

        <!--our services end-->


        <!--blog start-->

        <section>
            <div class="container">
                <div class="row justify-content-center text-center mb-5">
                    <div class="col-12 col-md-10 col-lg-8">
                        <div>
                            <h2 class="mb-0 font-w-6">最新的博客</h2>
                        </div>
                    </div>
                </div>
                <!-- / .row -->
                <div class="row">
                    <div class="col-12 col-lg-4">
                        <!-- Blog Card -->
                        <div class="card border-0 bg-transparent">
                            <div class="position-relative rounded overflow-hidden">
                                <div class="position-absolute z-index-1 bg-white text-pink text-center py-1 px-3 my-4">
                                    10月03日
                                </div>
                                <img class="card-img-top hover-zoom" src="/mallWeb/static/images/blog/01.jpg"
                                     alt="Image"></div>
                            <div class="card-body px-0 pb-0">
                                <div><a class="d-inline-block link-title btn-link text-small" href="#">鞋子,</a> <a
                                        class="d-inline-block link-title btn-link text-small" href="#">女装,</a> <a
                                        class="d-inline-block link-title btn-link text-small" href="#">女性</a></div>
                                <h2 class="h5 font-w-5 mt-2 mb-0"><a class="link-title" href="blog-single.html">奥特斯王国大战蛇皮怪水军</a>
                                </h2>
                            </div>
                            <div></div>
                        </div>
                        <!-- End Blog Card -->
                    </div>
                    <div class="col-12 col-lg-4 mt-5 mt-lg-0">
                        <!-- Blog Card -->
                        <div class="card border-0 bg-transparent">
                            <div class="position-absolute z-index-1 bg-white text-pink text-center py-1 px-3 my-4">
                                10月03日
                            </div>
                            <video id="clip1" class="rounded" width="100%" muted="" autoplay preload="" loop
                                   poster="/mallWeb/static/images/blog/video-image.jpg" style="object-fit: cover; min-height:240px;
    z-index: -100;">
                                <source src="/mallWeb/static/images/blog/fashion-videos.mp4" type="video/mp4">
                            </video>
                            <div class="card-body px-0 pb-0">
                                <div><a class="d-inline-block link-title btn-link text-small" href="#">服装,</a> <a
                                        class="d-inline-block link-title btn-link text-small" href="#">鞋类,</a> <a
                                        class="d-inline-block link-title btn-link text-small" href="#">配件</a></div>
                                <h2 class="h5 font-w-5 mt-2"><a class="link-title"
                                                                href="blog-single.html">奥特斯王国大战蛇皮怪水军</a></h2>
                            </div>
                            <div></div>
                        </div>
                        <!-- End Blog Card -->
                    </div>
                    <div class="col-12 col-lg-4 mt-5 mt-lg-0">
                        <!-- Blog Card -->
                        <div class="card border-0 bg-transparent">
                            <div class="position-relative rounded overflow-hidden bg-light-4">
                                <div class="position-absolute z-index-1 bg-white text-pink text-center py-1 px-3 my-4">
                                    09月21日
                                </div>
                                <div class="loader-container">
                                    <div class="rectangle-1"></div>
                                    <div class="rectangle-2"></div>
                                    <div class="rectangle-3"></div>
                                    <div class="rectangle-4"></div>
                                    <div class="rectangle-5"></div>
                                    <div class="rectangle-6"></div>
                                    <div class="rectangle-5"></div>
                                    <div class="rectangle-4"></div>
                                    <div class="rectangle-3"></div>
                                    <div class="rectangle-2"></div>
                                    <div class="rectangle-1"></div>
                                </div>
                                <audio controls autoplay style="object-fit: cover; min-width:350px">
                                    <source src="/mallWeb/static/images/blog/audio.mp3" type="audio/mpeg">
                                </audio>
                            </div>
                            <div class="card-body px-0 pb-0">
                                <div><a class="d-inline-block link-title btn-link text-small" href="#">音乐,</a> <a
                                        class="d-inline-block link-title btn-link text-small" href="#">跳动,</a> <a
                                        class="d-inline-block link-title btn-link text-small" href="#">潮流</a></div>
                                <h2 class="h5 font-w-5 mt-2"><a class="link-title"
                                                                href="blog-single.html">奥特斯王国大战蛇皮怪水军</a></h2>
                            </div>
                            <div></div>
                        </div>
                        <!-- End Blog Card -->
                    </div>
                </div>
            </div>
        </section>

        <!--blog end-->


        <!--multi sec end-->

    </div>

    <!--body content end-->


    <!--footer start-->

    <footer class="py-11 bg-dark-1">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-4"><a class="footer-logo text-white h2 mb-0" href="index.html"> <img
                        class="img-fluid" src="/mallWeb/static/images/share/Zync_logo.png" alt=""> </a>
                    <p class="my-3 text-muted pr-6">托马斯滴滴吹，但我们不吹，我们致力于把最优质的服务给顾客，把最稳定的机会给商家，把最难攻克的难题留给自己！</p>
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><img
                                src="/mallWeb/static/images/share/WeChat.png" width="30" height="30"></a></li>
                        <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><img
                                src="/mallWeb/static/images/share/Moments.png" width="30" height="30"></a></li>
                        <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><img
                                src="/mallWeb/static/images/share/Zhi.png" width="30" height="30"></a></li>
                        <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><img
                                src="/mallWeb/static/images/share/QQ.png" width="30" height="30"></a></li>
                        <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><img
                                src="/mallWeb/static/images/share/MicroBlog.png" width="30" height="30"></a></li>
                        <li class="list-inline-item"><a class="text-muted ic-2x" href="#"><img
                                src="/mallWeb/static/images/share/Tik%20Tok.png" width="30" height="30"></a></li>
                    </ul>
                </div>
                <div class="col-12 col-lg-8 mt-6 mt-lg-0">
                    <div class="row">
                        <div class="col-12 col-sm-4 navbar-white">
                            <h6 class="mb-4 text-white font-w-5">快速连接</h6>
                            <ul class="navbar-nav list-unstyled mb-0">
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4"
                                                             href="${pageContext.request.contextPath}/index-1">首页</a>
                                </li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4"
                                                             href="${pageContext.request.contextPath}/about-us">关于我们</a>
                                </li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4"
                                                             href="${pageContext.request.contextPath}/privacy-policy">隐私权政策</a>
                                </li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4"
                                                             href="${pageContext.request.contextPath}/faq">常见问题</a></li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4"
                                                             href="${pageContext.request.contextPath}/blog-1">博客</a>
                                </li>
                                <li class="nav-item"><a class="nav-link text-muted font-w-4"
                                                        href="${pageContext.request.contextPath}/contact-us">联系我们</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-12 col-sm-4 mt-6 mt-sm-0 navbar-white">
                            <h6 class="mb-4 text-white font-w-5">资讯</h6>
                            <ul class="navbar-nav list-unstyled mb-0">
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4"
                                                             href="${pageContext.request.contextPath}/terms-and-conditions">服务条款</a>
                                </li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4"
                                                             href="${pageContext.request.contextPath}/privacy-policy">隐私权政策</a>
                                </li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4" href="#">帮助</a></li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4" href="#">订单历史</a></li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4" href="#">您的账号</a></li>
                                <li class="nav-item"><a class="nav-link text-muted font-w-4" href="#">供应商</a></li>
                            </ul>
                        </div>
                        <div class="col-12 col-sm-4 mt-6 mt-sm-0 navbar-white">
                            <h6 class="mb-4 text-white font-w-5">购物指南</h6>
                            <ul class="navbar-nav list-unstyled mb-0">
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4" href="#">网站导航</a></li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4" href="#">搜索条件</a></li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4" href="#">高级搜索</a></li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4" href="#">退货政策</a></li>
                                <li class="mb-3 nav-item"><a class="nav-link text-muted font-w-4" href="#">我的订单</a></li>
                                <li class="nav-item"><a class="nav-link text-muted font-w-4" href="#">分类查询</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row pt-9">
                <div class="col-lg-4 col-md-6 col-sm-12">
                    <div class="d-flex footer-box">
                        <div class="mr-4"><i class="las la-map-marker-alt ic-2x icon-img"></i></div>
                        <div>
                            <h6 class="mb-1 text-white font-w-5">地址</h6>
                            <p class="mb-0 font-w-4 text-muted">贵州省遵义市红花岗区遵义师范学院
                                新蒲校区</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                    <div class="d-flex footer-box">
                        <div class="mr-4"><i class="las la-envelope ic-2x icon-img"></i></div>
                        <div>
                            <h6 class="mb-1 text-white font-w-5">邮箱地址</h6>
                            <a class="text-muted font-w-4" href="https://china.nba.com/wizards">
                                Russ0520@163.com</a><br>
                            <a class="text-muted font-w-4" href="https://china.nba.com/thunder"> 2870088768@qq.com</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 col-sm-12 mt-md-3 mt-lg-0">
                    <div class="d-flex footer-box">
                        <div class="mr-4"><i class="las la-mobile ic-2x icon-img"></i></div>
                        <div>
                            <h6 class="mb-1 text-white font-w-5">24h服务电话</h6>
                            <p class="mb-0 font-w-4 text-muted">以及征求建议电话 <br>
                                +86 1314 520 159 </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row text-muted align-items-center pt-9">
                <div class="col-md-7 font-w-4"><small>版权：托马斯滴滴吹版权所有.</small></div>
                <div class="col-md-5 text-md-right mt-3 mt-md-0">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a href="#"> <img class="img-fluid"
                                                                       src="/mallWeb/static/images/share/Zhi.png"
                                                                       width="40" height="0"> </a></li>
                        <li class="list-inline-item"><a href="#"> <img class="img-fluid"
                                                                       src="/mallWeb/static/images/share/WeChatPay.png"
                                                                       width="40" height="40"> </a></li>
                        <li class="list-inline-item"><a href="#"> <img class="img-fluid"
                                                                       src="/mallWeb/static/images/share/QuickPass.png"
                                                                       width="40" height="40"> </a></li>
                        <li class="list-inline-item"><a href="#"> <img class="img-fluid"
                                                                       src="/mallWeb/static/images/share/CarPay.png"
                                                                       width="40" height="40"> </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!--footer end-->

</div>

<!-- page wrapper end -->


<!-- 快速查看 Modal模式，商品详情的弹窗 -->
<div class="modal fade view-modal" id="quick-view" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <button type="button" class="close-quickview" data-dismiss="modal" aria-label="Close"><i
                    class="ion-ios-close-empty"></i></button>
            <div class="modal-body">
                <div class="row align-items-center">
                    <div class="col-lg-5 col-12"><img class="img-fluid rounded"
                                                      src="/mallWeb/static/images/product/p11.jpg" alt=""/></div>
                    <div class="col-lg-7 col-12 mt-5 mt-lg-0">
                        <div class="product-details">
                            <h1 class="h4 mb-0 font-w-6">Unpaired Running Shoes</h1>
                            <div class="star-rating mb-4"><i class="las la-star"></i><i class="las la-star"></i><i
                                    class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i>
                            </div>
                            <span class="product-price h5 text-red-1">￥25.00 <del
                                    class="text-muted h6">￥35.00</del></span>
                            <ul class="list-unstyled my-3">
                                <li><small>Availibility: <span class="text-green"> In Stock</span> </small>
                                </li>
                                <li class="font-w-4"><small>Categories :<span class="text-muted"> womens, clothing, dresses, footwear</span></small>
                                </li>
                            </ul>
                            <p class="mb-4 desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla
                                augue nec est tristique auctor. Donec non est at libero vulputate rutrum. vulputate
                                adipiscing cursus eu, suscipit id nulla. quis fermentum turpis eros eget velit.</p>
                            <div class="d-sm-flex align-items-center mb-5">
                                <div class="d-flex align-items-center mr-sm-4">
                                    <button class="btn-product btn-product-up"><i class="las la-minus"></i>
                                    </button>
                                    <input class="form-product" type="number" name="form-product" value="1">
                                    <button class="btn-product btn-product-down"><i class="las la-plus"></i>
                                    </button>
                                </div>
                                <select class="custom-select mt-3 mt-sm-0" id="inputGroupSelect02">
                                    <option selected>Size</option>
                                    <option value="1">XS</option>
                                    <option value="2">S</option>
                                    <option value="3">M</option>
                                    <option value="3">L</option>
                                    <option value="3">XL</option>
                                    <option value="3">XXL</option>
                                </select>
                                <div class="d-flex text-center ml-sm-4 mt-3 mt-sm-0">
                                    <div class="form-check pl-0 mr-2">
                                        <input type="radio" class="form-check-input" id="color-filter1" name="Radios">
                                        <label class="form-check-label" for="color-filter1"
                                               data-bg-color="#ffc107"></label>
                                    </div>
                                    <div class="form-check pl-0 mr-2">
                                        <input type="radio" class="form-check-input" id="color-filter2" name="Radios"
                                               checked>
                                        <label class="form-check-label" for="color-filter2"
                                               data-bg-color="#6d5b97"></label>
                                    </div>
                                    <div class="form-check pl-0 mr-2">
                                        <input type="radio" class="form-check-input" id="color-filter3" name="Radios">
                                        <label class="form-check-label" for="color-filter3"
                                               data-bg-color="#88b04b"></label>
                                    </div>
                                    <div class="form-check pl-0">
                                        <input type="radio" class="form-check-input" id="color-filter4" name="Radios">
                                        <label class="form-check-label" for="color-filter4"
                                               data-bg-color="#23a5a8"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="d-sm-flex align-items-center mt-5">
                                <button class="btn btn-primary btn-animated mr-sm-3 mb-3 mb-sm-0"><i
                                        class="las la-shopping-cart mr-2"></i>加入购物车
                                </button>
                                <a class="btn btn-animated btn-dark" href="#"> <i class="lar la-heart mr-2 ic-1-2x"></i>加入收藏
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--back-to-top start-->

<div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>

<!--back-to-top end-->

<!-- inject js start -->

<script src="/mallWeb/static/js/jquery-3.5.1.min.js"></script>
<script src="/mallWeb/static/js/popper.min.js"></script>
<script src="/mallWeb/static/js/bootstrap.min.js"></script>
<script src="/mallWeb/static/js/owl.carousel.min.js"></script>
<script src="/mallWeb/static/js/light-slider.js"></script>
<script src="/mallWeb/static/js/parallax.js"></script>
<script src="/mallWeb/static/js/magnific-popup.min.js"></script>
<script src="/mallWeb/static/js/jquery.countdown.min.js"></script>
<script src="/mallWeb/static/js/jquery.dd.min.js"></script>
<script src="/mallWeb/static/js/validator.js"></script>
<script src="/mallWeb/static/js/wow.js"></script>
<script src="/mallWeb/static/js/theme-script.js"></script>
<script src="/mallWeb/static/js/mall.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        helangSearch.init();
    })
</script>
<script type="text/javascript">
    /* 搜索 */
    var helangSearch = {

        /* 元素集 */
        els: {},
        /* 搜索类型序号 */
        searchIndex: 0,
        /* 火热的搜索列表 */
        hot: {
            /* 颜色 */
            color: ['#ff2c00', '#ff5a00', '#ff8105', '#fd9a15', '#dfad1c', '#6bc211', '#3cc71e', '#3cbe85'],
            /* 列表 */
            list: [
                $(".pickListModels").val(),
                $(".pickListModels").next().val(),
                $(".pickListModels").next().next().val(),
                $(".pickListModels").next().next().next().val(),
                $(".pickListModels").next().next().next().next().val(),
                $(".pickListModels").next().next().next().next().next().val(),
                $(".pickListModels").next().next().next().next().next().next().val(),
                $(".pickListModels").next().next().next().next().next().next().next().val()
            ]
        },
        /* 初始化 */
        init: function () {
            var _this = this;
            this.els = {
                pickerBtn: $(".picker"),
                pickerList: $(".picker-list"),
                logo: $(".logo"),
                hotList: $(".hot-list"),
                input: $("#search-input"),
                button: $(".search")
            };

            /* 注册事件 */
            /* 搜索类别选择按钮 */
            this.els.pickerBtn.click(function () {
                if (_this.els.pickerList.is(':hidden')) {
                    setTimeout(function () {
                        _this.els.pickerList.show();
                    }, 100);
                }
            });
            /* 搜索类别选择列表 */
            this.els.pickerList.on("click", ">li", function () {
                _this.els.logo.css("background-image", ('url(img/' + $(this).data("logo") + ')'));
                _this.searchIndex = $(this).index();
                _this.els.pickerBtn.html($(this).html())
            });
            /* 搜索 输入框 点击*/
            this.els.input.click(function () {
                if (!$(this).val()) {
                    setTimeout(function () {
                        _this.els.hotList.show();
                    }, 100);
                }
            });
            /* 搜索 输入框 输入*/
            this.els.input.on("input", function () {
                if ($(this).val()) {
                    _this.els.hotList.hide();
                }
            });

            /* 设置热门搜索列表 */
            if (_this.searchIndex == 0) {
                this.els.hotList.html(function () {
                    var str = '';
                    $.each(_this.hot.list, function (index, content) {
                        str += '<a href="product-1?content=' + content + '" >'
                            + '<div class="number" style="color: ' + _this.hot.color[index] + '">' + (index + 1) + '</div>'
                            + '<div>' + content + '</div>'
                            + '</a>';
                    });
                    return str;
                });

            }
            /* 搜索按钮 */
            this.els.button.click(function () {
                /*
                    *icon
                    *1为勾勾
                    *2为叉叉
                    *3为问号
                    *4为锁
                    *5为难过表情
                    *6为笑脸表情
                    *7为感叹号
                    *最多为7不能再多了
                    */
                //var searchArr=['商品','店铺','用户','博客'];
                if (_this.els.input.val() == "") {
                    layui.use(['layer', 'form', 'jquery'], function () {
                        var layer = layui.layer
                            , form = layui.form
                            , $ = layui.$;

                        layui.use('layer', function () {
                            layer.msg('内容不能为空', {icon: 6})
                        })

                    })

                } else {
                    //跳转到商品
                    if (_this.searchIndex == 0) {
                        $.ajax({
                            type: "POST",
                            url: "search-1?content=" + _this.els.input.val(),
                            contentType: "application/json",
                            data: {
                                //"content":_this.els.input.val()
                            },
                            datatype: 'json',
                            error: function () {
                                alert("error")
                                return false;
                            },
                            success: function (data) {
                                if (data.success != null) {
                                    window.location.href = "product-1?content=" + _this.els.input.val()
                                } else if (data.nosearch != null) {
                                    layui.use('layer', function () {
                                        layer.msg('您搜索的内容不存在，请重新搜索', {icon: 3})
                                    })
                                }
                            }
                        })
                        //window.location.href="product-1?content="+_this.els.input.val()
                    }
                    //跳转到店铺
                    else if (_this.searchIndex == 1) {
                        window.location.href = "blog-1"
                    }
                    //跳转到用户
                    else if (_this.searchIndex == 2) {
                        window.location.href = "blog-1"
                    }
                    //跳转到博客
                    else if (_this.searchIndex == 3) {
                        window.location.href = "blog-1"
                    }
                }
            });
            /* 文档 */
            $(document).click(function () {
                _this.els.pickerList.hide();
                _this.els.hotList.hide();
            });
            /* 搜索按钮 */
        }

    };

</script>
<!-- inject js end -->
</body>
</html>
